<template>
  <div class="page-card fun-manage">
    <PageHeader title="设施功能管理" :is-add="false">
      <template #left>
        <el-space>
          <div
            :class="item.active ? 'navbar-active navbar-box' : 'navbar-box'"
            v-for="item in navbar"
            :key="item.name"
            @click="activeNavbar(item)"
          >
            {{ item.name }}
          </div>
        </el-space>
      </template>
    </PageHeader>
    <div class="page-card-body" flex-1 w-full>
      <PageTableBox>
        <template #table>
          <el-table :data="tableData" style="width: 100%" height="100%">
            <el-table-column fixed prop="name" label="设施名称" />
            <el-table-column prop="state" label="设施状态">
              <template #default="scope">
                <el-select v-model="scope.row.state" style="width: 140px">
                  <el-option :label="isApply ? '已预约' : '使用中'" :value="true" />
                  <el-option :label="isApply ? '未预约' : '未使用'" :value="false" />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </PageTableBox>
    </div>
  </div>
</template>

<script setup lang="ts">
import PageHeader from "../components/PageHeader.vue";
import { ref } from "vue";
import PageTableBox from "../components/PageTableBox.vue";

const tableData: any = [];
for (let i = 0; i < 100; i++) {
  tableData.push({
    name: i % 2 === 0 ? "停车场" : "篮球场",
    state: i % 2 === 0 ? true : false
  });
}

const navbar = ref([
  {
    name: "设备预约情况",
    active: true
  },
  {
    name: "设备使用情况",
    active: false
  }
]);
const isApply = ref(true);
const activeNavbar = (item: { name: string; active: boolean }) => {
  navbar.value.forEach(item => {
    item.active = false;
  });
  item.active = true;
  isApply.value = !isApply.value;
};
</script>

<style scoped lang="scss">
.fun-manage {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.navbar-box {
  height: 29px;
  font-size: 14px;
  border-radius: 3px;
  line-height: 29px;
  padding: 0 10px;
  text-align: center;
  cursor: pointer;
  color: rgb(78, 89, 105);
  &.navbar-active {
    background-color: #d9ecff;
    color: #a0cfff;
  }
  &:hover {
    background-color: #f8f8f8;
  }
}
</style>
